<template>
	<view>
		<!-- 2020年度电影榜单 -->
		<image class="bangdan" src="@/static/yxy1.png"></image>
		<!-- 一周口碑电影榜 -->
		<image class="bangdan" src="@/static/yxy2.png"></image>
		<!-- 各分类榜单 -->
		<scroll-view scroll-y="true">
			<view class="content">
				<bangdan-yxy v-for="(item, index) in list" :key="index" :src="item.src" :m1="item.m1" :m2="item.m2"
					:m3="item.m3" :fen1="item.fen1" :fen2="item.fen2" :fen3="item.fen3">
				</bangdan-yxy>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import bangdanyxy from '../../components/bangdan-yxy/bangdan-yxy.vue'
	export default {
		components: {
			'bangdan-yxy': bangdanyxy
		},
		data() {
			return {
				list: [{
					src: '/static/yxy3.png',
					m1: '1.肖申克救赎',
					m2: '2.霸王别姬',
					m3: '3.阿甘正传',
					fen1: '9.7分',
					fen2: '9.6分',
					fen3: '9.5分'
				}, {
					src: '/static/yxy4.png',
					m1: '1.梦华录',
					m2: '2.警察荣誉',
					m3: '3.寻人记Ⅱ',
					fen1: '8.5分',
					fen2: '8.6分',
					fen3: '9.6分',
				}, {
					src: '/static/yxy5.png',
					m1: '1.黑袍纠察队 第二季',
					m2: '2.怪奇物语 第四季',
					m3: '3.史前星球',
					fen1: '9.4分',
					fen2: '9.4分',
					fen3: '9.4分',
				}, {
					src: '/static/yxy6.png',
					m1: '1.哪吒之魔童降世',
					m2: '2.少年的你',
					m3: '3.谁先爱上他的',
					fen1: '8.4分',
					fen2: '8.2分',
					fen3: '8.6分',
				}, {
					src: '/static/yxy7.png',
					m1: '1.何以为家',
					m2: '2.绿皮书',
					m3: '3.小丑',
					fen1: '9.1分',
					fen2: '8.9分',
					fen3: '8.7分',
				}, {
					src: '/static/yxy8.png',
					m1: '1.爱尔兰人',
					m2: '2.婚姻故事',
					m3: '3.死无对证',
					fen1: '8.8分',
					fen2: '8.6分',
					fen3: '7.4分',
				}, {
					src: '/static/yxy9.png',
					m1: '1.星际穿越',
					m2: '2.黑客帝国',
					m3: '3.头号玩家',
					fen1: '9.4分',
					fen2: '9.1分',
					fen3: '8.7分',
				}, {
					src: '/static/yxy10.png',
					m1: '1.三傻大闹宝莱坞',
					m2: '2.大话西游之月光宝盒',
					m3: '3.两杆大烟枪',
					fen1: '9.2分',
					fen2: '9分',
					fen3: '9.1分',
				}, {
					src: '/static/yxy11.png',
					m1: '1.蝙蝠侠：黑暗骑士崛起',
					m2: '2.谍影重重3',
					m3: '3.复仇者联盟4：终局之战',
					fen1: '8.8分',
					fen2: '8.8分',
					fen3: '8.5分',
				}, {
					src: '/static/yxy12.png',
					m1: '1.泰坦尼克号',
					m2: '2.大话西游之大圣娶亲',
					m3: '3.乱世佳人',
					fen1: '9.4分',
					fen2: '9.2分',
					fen3: '9.3分',
				}, {
					src: '/static/yxy13.png',
					m1: '1.莫言的奇奇怪怪故事集',
					m2: '2.她只说“是的”',
					m3: '3.幻灭三部曲',
					fen1: '8.8分',
					fen2: '7.6分',
					fen3: '8.3分',
				}, {
					src: '/static/yxy14.png',
					m1: '1.打开一颗心',
					m2: '2.贫穷的质感',
					m3: '3.如何带着三文鱼旅行',
					fen1: '9.1分',
					fen2: '8.8分',
					fen3: '7.9分',
				}, {
					src: '/static/yxy15.png',
					m1: '1.红楼梦',
					m2: '2.活着',
					m3: '3.1984',
					fen1: '9.6分',
					fen2: '9.4分',
					fen3: '9.4分',
				}, ]
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.bangdan {
		width: calc(100% - 16px);
		height: 160px;
		border-radius: 15px;
		margin-top: 16px;
		position: relative;
		left: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		display: flex;
		flex-wrap: wrap
	}
</style>